@mixin dpr ($obj, $px) {
  #{$obj}: $px * 1px;
  [data-dpr = "2"] & {
    #{$obj}: $px * 2px
  }
  [data-dpr = "3"] & {
    #{$obj}: $px * 3px
  }
}
@mixin border ($obj, $px, $style, $color) {
  #{$obj}: $px * 1px $style $color;
  [data-dpr = "2"] & {
    #{$obj}: $px * 2px $style $color
  }
  [data-dpr = "3"] & {
    #{$obj}: $px * 3px $style $color
  }
}
.Mnews{
  position: absolute;
  z-index: 999999;
  bottom: 20%;
  left: 0;
  width: 100%;
  text-align: center;
  p{
    display: inline-block;
    vertical-align: middle;
    background: rgba(0, 0, 0, .8);
    padding: 10px;
    font-size: 12px;
    border-radius: 4px;
    color: #fff;
  }
  animation-name: riseUp;
  animation-delay: 0;
  animation-duration: .2s;
  animation-timing-function: ease-in;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}
.ios-message{
  position: fixed;
  z-index: 99;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, .4);
  text-align: center;
  .container{
    display: inline-block;
    vertical-align: middle;
    transform-origin: 50% 50%;
    background: #fff;
    @include dpr('border-radius', 8);
    box-shadow: 6px 6px 8px 0 rgba(0, 0, 0, .4);
    overflow: hidden;
    animation-name: scaleShow;
    animation-delay: 0;
    animation-duration: .2s;
    animation-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55);
    animation-iteration-count: 1;
    animation-fill-mode: both;
    .message-header{
        @include dpr('padding-left', 12);
        @include dpr('padding-right', 12);
        @include dpr('padding-top', 20);
        @include dpr('padding-bottom', 20);
        @include dpr('width', 245);
        color: #000;
        h6{
            @include dpr('margin-bottom', 10);
            @include dpr('font-size', 16);
            font-weight: 700;
        }
        p{
            @include dpr('font-size', 12);
        }
    }
    .message-bt{
        height: pxtorem(80);
        line-height: pxtorem(80);
        @include dpr('height', 40);
        @include dpr('line-height', 40);
        @include border('border-top', 1 , solid, #d5d5d5);
        font-size: 0;
        p{
            display: inline-block;
            width: 50%;
            text-align: center;
            @include dpr('font-size', 14);
            color:#72a5ef
        }
        p:first-child{
            @include border('border-right', 1, solid, #d5d5d5);
            color:#999
        }
    }
    .message-full-bt{
      height: pxtorem(80);
        line-height: pxtorem(80);
        @include dpr('height', 40);
        @include dpr('line-height', 40);
        @include border('border-top', 1 , solid, #d5d5d5);
        font-size: 0;
        color: #006eff;
        p{
            display: inline-block;
            width: 100%;
            text-align: center;
            @include dpr('font-size', 14);
        }
    }
  }
}
.ios-message:after{
  content: '';
  width: 0;
  height: 100%;
  display: inline-block;
  vertical-align: middle;
}
.loading{
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  .container{
    position: relative;
    display: inline-block;
    @include dpr('width', 100);
    @include dpr('height', 100);
    div:nth-child(1){
      border-radius: 50% 50% 50% 50%;
      position: absolute;
      top: 0;
      left: 0;
      @include dpr('width', 100);
      @include dpr('height', 100);
      @include border('border-top', 5, solid, #fff);
      @include border('border-bottom', 5, solid, transparent);
      @include border('border-left', 5, solid, #fff);
      @include border('border-right', 5, solid, transparent);
      animation: rotate 2s infinite;
    }
    div:nth-child(2){
      border-radius: 50% 50% 50% 50%;
      position: absolute;
      @include dpr('top', 10);
      @include dpr('left', 10);
      @include dpr('width', 80);
      @include dpr('height', 80);
      @include border('border-top', 5, solid, #fff);
      @include border('border-bottom', 5, solid, transparent);
      @include border('border-left', 5, solid, #fff);
      @include border('border-right', 5, solid, transparent);
      animation: rotate 2s infinite;
      animation-delay: 0.2s;
    }
    div:nth-child(3){
      border-radius: 50% 50% 50% 50%;
      position: absolute;
      @include dpr('top', 20);
      @include dpr('left', 20);
      @include dpr('width', 60);
      @include dpr('height', 60);
      @include border('border-top', 5, solid, #fff);
      @include border('border-bottom', 5, solid, transparent);
      @include border('border-left', 5, solid, #fff);
      @include border('border-right', 5, solid, transparent);
      animation: rotate 2s infinite;
      animation-delay: 0.4s;
    }
  }
}

@keyframes rotate{
  50%{
    transform: rotate(360deg) scale(0.8);
  }
}
@keyframes riseUp{
  0%{
    transform: translate(0, 100%);
  }
  100%{
    transform: translate(0, 50%);
  }
}
@keyframes scaleShow{
  0%{
    transform: scale(.5);
    opacity: 0;
  }
  100%{
    transform: scale(1);
    opacity: 1;
  }
}